<template>
  <!-- 1.初始化角色列表组件的基本代码结构 -->
  <!-- 2.router.js路由中导入角色列表组件并使用use（）方法注册组件实现挂载到Vue根组件上 -->
  <!-- 角色列表视图区域     理解：逆向思维-不同权限分配给不同角色-不同角色分配给用户-----从而控制用户可以进行哪些操作 用户角色决定权限（可以进项哪些操作）-->
  <!-- 点击角色列表路由切换到对应角色列表组件展示的页面 -->
  <!-- 3.实现角色列表组件的基本页面布局：头部-面包屑导航、主体-卡片式布局（里面是Tabel列表-角色列表操作组件Button-Tooltip文字提示组件：鼠标hover就有提示） -->
  <div>
    <!--3.1 面包屑导航视图区域    只能有1个根标签 下面都是组件里面的类标签 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 3.2 卡片列表视图区域 -->
    <el-card>
      <!-- 3.3 button按钮视图区域  角色列表按钮 -->
      <el-row>
        <el-button type="primary">添加角色</el-button>
      </el-row>
      <!-- 3.4Tabel表格视图区域  用户角色列表区域 -->
      <!-- stripe	是否为斑马纹 table     border	是否带有纵向边框 -->
      <el-table :data="RolesList" style="width: 100%" border stripe>
        <!-- 展开列  type="expand"   渲染角色下所有分类使用slot-scope="scope"插槽：显示不同角色对应权限-->
        <el-table-column type="expand" width="50px">
          <template slot-scope="scope">
            <!-- 栅格系统布局 el-row组件-列 el-col-行：每行24列  遍历循环一级权限，没循环1次就把1级权限放到el-col标签里 类名class前必须加冒号表示双向绑定-->
            <el-row
              v-for="(item1,index1Level) in scope.row.children"
              :key="item1.id"
              :class="['bdorebottom',index1Level===0 ? 'bdoretop' : 'bdorebottom' ,'vcenter']"
            >
              <!-- 渲染一级权限 1行占9等分列 -->
              <el-col :span="5">
                <el-tag closable @close="removeRightById(scope.row,item1.id)">{{item1.authName}}</el-tag>
                <!-- 美化一级权限(需要去类名class且双向绑定使用冒号)后 再使用icon图标组件 -->
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- 渲染二级、三级权限 1行占15等分列-->
              <el-col :span="19">
                <!-- 给每个二级权限添加一个el-row（使用v-for：=""遍历循环每个二级权限） 再添加2个el-col 分别放二级权限跟三级权限 添加类vcenter美化居中  ,'vcenter'-->
                <el-row
                  v-for="(item2,index2Level) in item1.children"
                  :key="item2.id"
                  :class="[index2Level===0 ? '' : 'bdoretop','vcenter']"
                >
                  <!-- 二级权限    使用Tag组件-每列加type="success"就会绿色-->
                  <el-col :span="6">
                    <el-tag type="success" closable @close="removeRightById(scope.row,item2.id)">{{item2.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <!-- 三级权限  使用Tag组件： closable属性可以定义一个标签是否可移除  并注册移除点击事件使用close事件，值是自定义方法removeRightById（delete请求需要传参数，API文档2个动态参数：角色权限id），该方法在methods中使用接收参数-->
                  <el-col :span="18">
                    <el-tag type="warning" v-for="(item3,index3Level) in item2.children" :key="item3.id" closable @close="removeRightById(scope.row,item3.id)">
                      {{item3.authName}}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <pre>{{scope.row}}</pre>
          </template>
        </el-table-column>
        <!-- 索隐列   -->
        <el-table-column type="index" width="50px"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="325px"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述" width="325px"></el-table-column>
        <el-table-column prop="address" label="操作" width="300px">
          <!-- Button按钮组件 -->
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
          <!-- 绑定分配权限 弹出对话框 Dialog弹出对话框组件  获取数据-->
          <el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetrightDialod">分配权限</el-button>
          <!-- Tooltip操作提示组件 -->

          <!--    -->
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹出对话框视图区域 Dialog弹出对话框组件   visible属性，它接收Boolean，当为true时显示 Dialog data中自定义visible属性false默认隐藏对话框-->
    <el-dialog title="提示" :visible.sync="setRightDialogVisible" width="50%">
      <!-- Tree属性控件组件 ：data是绑定数据源="自定义权限数据"  绑定属性 -：prop 的值看文档是对象，所以需要在data中定义 show-checkbox可选择勾选框 -->
      <!-- node-key属性：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的（对应这里文本的id值）    default-expand-all是否默认展开所有节点 -->
        <el-tree :data="RightList" :props="TreeProps" show-checkbox node-key="id" default-expand-all></el-tree>
        <span slot="footer" class="dialog-footer">
        <el-button @click="setRightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRightDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 定义空数组-接收发送请求成功响应回来的j角色列表数据，将数据保存到RolesList列表中
  data() {
    return {
      // 获取所有权限列表
      RolesList: [],
      // 删除权限 extend展开列不需要在删除权限后关闭且不需要再次重新刷新页面 所以不需要空数组保存最新数据
      // RemoveRoleList:[],
      // 默认隐藏弹出对话框 控制弹出对话框的显示与隐藏
      setRightDialogVisible:false,
      // 所有权限的数据
      RightList:[],
      // 树形控件属性绑定
      TreeProps:{
          children: 'children',
          label: 'authName'
        }
    }
  },
  // 使用生命周期钩子函数created 角色列表组件创建时就调用getRolesList（）方法 发送数据请求调用后台API接口1.5.1-获取角色列表数据
  created() {
    this.getRolesList()
  },
  // 获取所有角色列表 在methods中使用getRolesList（）方法
  methods: {
    async getRolesList() {
      //  调用API接口 发送数据请求-获取角色列表
      const { data: res } = await this.$http.get('roles')
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败')
      }
      this.RolesList = res.data
    },
    // 根据id删除对应权限
    async removeRightById(role,rightId) {
      // 弹框提示用户是否要删除 移除权限提示文本-MessageBox弹框组件
      const removeConfirm = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(error=>error)
      console.log(removeConfirm);
      if(removeConfirm !=='confirm'){//等号右边引号不可以掉 掉了就显示不了 正确提示 info是默认属性=>error
        return this.$message.info('删除权限取消')
      }
      // 确认了删除
      // console.log('删除权限成功');
      // this.$message.success('删除权限成功')//调用后台提供API接口发送请求 请求路径roles/:roleId/rights/:rightId 中绑定是动态roleId跟动态rightId
      const { data:res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)//括号里面必须是反引号拼接-动态数据，否则data为null
      console.log(res);
      if(res.meta.status !== 200 ){
        return this.$message.error('删除权限失败')
      }
      this.$message.success('删除权限成功')
      // this.getRolesList() //删除三级权限后 会关闭展开行-会刷新页面 所以不需要刷新页面-让其删除数据时不关闭展开行，直接显示最新数据
      // 方法中2个参数role、rightId 重新赋值  接着给一级、二级权限都进行删除操作
      this.role = res.data
    },
    // 展示分配权限的对话框  调用后台所有权限列表API1.4.1
    async showSetrightDialod(){
    const { data:res }  = await this.$http.get('rights/tree ')
    console.log(res);
    if(res.meta.status !==200 ){
      return this.$message.error('获取分配权限列表失败')
    }  
    this.$message. success('获取分配权限列表成功') 
    // 把获取到的权限保存到data中
    this.RightList = res.data
    // 显示弹出对话框
    this.setRightDialogVisible = true
    }
  }
}
</script>

<style lang="less" scope>
.el-tag {
  margin: 7px;
}
.bdoretop {
  border-top: 1px solid #eee;
}
.bdorebottom {
  border-bottom: 1px solid #eee;
}
// 纵向居中
.vcenter {
  display: flex;
  align-items: center;
}
</style>